<html>
  <head>
    <title>BeaverDam</title>

     <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="/static/vendor/jquery/jquery.js"></script>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script src="/static/vendor/lodash/lodash.js"></script>
    <!-- <link href="/static/vendor/bootstrap/css/bootstrap.css" rel="stylesheet"> -->
    <!-- <script type='text/javascript' src="/static/vendor/bootstrap/js/bootstrap.min.js"/></script> -->
    <script type='text/javascript' src="/static/vendor/randomColor/randomColor.js"></script>

    <link rel="stylesheet" type="text/css" href="/static/app.css"/>

    <script>
        video = {
            'id': 'cjlfk2gcl00u002s6o138ji1v',
            'location': 'https://firebasestorage.googleapis.com/v0/b/labelbox-193903.appspot.com/o/cji227p5ub6020794sz0dk57q%2F4d333587-4390-47ad-b644-5ba026e832af%2Ffrag_bunny.mp4?alt=media&token=d885537a-cb07-42b5-a87e-75617cef8275',
            'is_image_sequence': false,
            'annotated': false,
            'verified': false,
            'rejected': false,
        };
        imageList = 0,
        helpEmbedded = true;
    </script>
    <script src="/static/vendor/raphael/raphael.min.js"></script>
    <script src="/static/vendor/imgplay/jquery.imgplay.min.js"></script>
    <script type="text/javascript" src="/static/views/framePlayers.js"></script>
    <!-- <script type="text/javascript" src="/static/app.js"></script> -->
    <script>
    $(() => {
        window.Labelbox.fetchNextAssetToLabel();
        window.Labelbox.currentAsset().subscribe((asset) => {
            console.log(asset, window.p)
            if (asset && !window.p) {
                // Make the player
                window.p = new Player({
                    $container: $("#player"),
                    videoSrc: asset.data,
                    videoId: asset.id,
                    isImageSequence: false,
                });
            }
        });

    });
    </script>

    <script type="text/javascript" src="/static/bounds.js"></script>
    <script type="text/javascript" src="/static/datasources.js"></script>
    <script type="text/javascript" src="/static/misc.js"></script>
    <script type="text/javascript" src="/static/player.js"></script>
    <script type="text/javascript" src="/static/annotation.js"></script>
    <script type="text/javascript" src="/static/views/keyframebar.js"></script>
    <script type="text/javascript" src="/static/views/annotationbar.js"></script>
    <script type="text/javascript" src="/static/views/player.js"></script>
    <script type="text/javascript" src="/static/views/rect.js"></script>

    <script type="text/javascript">
        // set up a new XMLHttpRequest variable
        var request = false;
        try {
            request = new XMLHttpRequest();
        } catch (trymicrosoft) {
            try {
                request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (othermicrosoft) {
                try {
                    request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (failed) {
                    request = false;
                }
            }
        }

        if (!request)
            alert("Error initializing XMLHttpRequest!");

        // what to do when http ready state changes
        function updatePage() {
            if (request.readyState == 4) {
                if (request.status == 200) {

                    // get response array
                    var data = JSON.parse(request.responseText);
                    update_select($('select[name=states]'), data);
                }
                // some error checking
                else if (request.status == 404) {
                    alert("Request url does not exist");
                }
                else {
                    alert("Error: status code is " + request.status);
                }
            }
        }

        function update_select(select, data) {
            select.find('option').remove();
            for (var i=0; i<data.length; i++) {
                state = data[i]
                select.append($('<option value="' + state['name'] +'" style="background-color: #' + state['color'] + '">' + state['name'] + '</option>'));
            }
        }

        $(document).ready(function () {
        $("#labels").prop("selectedIndex", 0).change();
        });
    </script>

  </head>
  <body>
    <div class="panel panel-default panel-space player-container" id="player">

    <div class="row">

        <div class="top-controls">
        <select id="labels" name="labels">
            <option style="background-color: #FF0000" value="Object 1" id="object-radio-Object 1">
            Class label 1
            </option>
            <option style="background-color: #00FF00" value="Object 2" id="object-radio-Object 2">
            Second class
            </option>
            <option style="background-color: #0000FF" value="Object 3" id="object-radio-Object 3">
            The third class
            </option>
        </select>

        <a class="btn btn-default" target="_blank" style="margin-left: 25px;" id="show-help">
            Help
        </a>

        <div id="submit-container">
            <div id="submit-btn-group" class="btn-group" role="group">
                <button id="submit-btn" type="button" class="btn btn-primary">Submit</button>
            </div>
        </div>

        <div class="panel-body col-md-9">
        <div class="player-screen">
            <div class="player-video-container">
            <video class="player-video"></video>
            </div>
            <div class="player-paper"></div>
            <div class="player-loader">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
            </div>
        </div>

        <div class="panel panel-primary bottom-controls">
            <div class="panel-heading">
            <input class="player-control-scrubber" type="range" min="0" max="10000" value="0" step="1"/>
            <div class="panel panel-success">
                <!-- <div class="panel-heading style="background-color: #3A7734"> -->
                <div class="player-keyframebar"></div>
                <!-- </div> -->
            </div>

            <span class="noselect">
                <div class="glyphicon glyphicon-fast-backward player-control-goto-start" title="Go to start"></div>
                <div class="glyphicon glyphicon-step-backward player-control-step-backward" title="One Frame Backward (shortcut - 'a')"></div>
                <div class="glyphicon glyphicon-play player-control-play-pause" title="Play / Pause (shortcut - 'space'')"></div>
                <div class="glyphicon glyphicon-step-forward player-control-step-forward" title="One Frame Forward (shortcut - 's')"></div>
                <div class="glyphicon glyphicon-fast-forward player-control-goto-end"></div>
                <div class="glyphicon glyphicon-trash player-control-delete-keyframe" title="Delete selected frame (shortcut - 'delete', 'd')"></div>
            </span>
            <input class="form-control player-control-time" id="frame-number" placeholder="0">
            <div class="pull-right">
                <input id="scale-checkbox" type="checkbox" />
                <label for="scale-checkbox">Scale to fit</label>
            </div>
            </div>
        </div>
        </div>

        <div class="player-annotationbar col-md-3 panel-group" id="accordion" style="padding-right: 30px; overflow-y: scroll; height: 100%;">
        </div>


<!-- Edit Label Modal -->
    <div class="modal fade" id="edit-label-modal" tabindex="-1" role="dialog" aria-labelledby="label" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="label">Edit Annotation Label</h4>
          </div>
          <div class="modal-body">
            <select name="edit-label" id="edit-label">
              <option style="background-color: #FF0000" value="Object 1">
              Class label 1
              </option>
              <option style="background-color: #00FF00" value="Object 2">
              Second class
              </option>
              <option style="background-color: #0000FF" value="Object 3">
              The third class
              </option>
            </select>
          </div>
          <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
            <a href="#" class="btn btn-primary" id="change-label">Change Label</a>
          </div>
        </div>
      </div>
    </div>

<!-- Edit State Modal -->
    <div class="modal fade" id="edit-state-modal" tabindex="-1" role="dialog" aria-labelledby="state" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="state">Edit Keyframe State</h4>
          </div>
          <div class="modal-body">
            <p id="annotation-label"> </p>
            <select name="edit-state" id="edit-state"> </select>
          </div>
          <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
            <a href="#" class="btn btn-primary" id="change-state">Change State</a>
          </div>
        </div>
      </div>
    </div>

<!-- Delete Annotaion Modal -->
    <div class="modal fade" id="delete-annotation-modal" tabindex="-1" role="dialog" aria-labelledby="label" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="label">Delete Annotation</h4>
          </div>
          <div class="modal-body">
            <p>Are you sure you want to delete this annotation?</p>
          </div>
          <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
            <a href="#" class="btn btn-primary" id="delete-annotation">Delete</a>
          </div>
        </div>
      </div>
    </div>

    <!-- {% include "modals/generic_modal.html" %} -->
<div class="modal fade" id="genericModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 id="genericModalTitle" class="modal-title submit-result">aaa</h4>
      </div>

      <div class="modal-body">
        <span id="genericModalMessage">aaa</span>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

    <!-- {% include "modals/instructions.html" %} -->
<div class="modal fade" id="instructionModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title submit-result">Instructions &amp; Requirements</h4>
      </div>
      <div class="modal-body">
        <pre>
Welcome to our Video Mapping Tool.

Your task is to accurately draw rectangles around people in each video. We need this so that we can train a computer to understand people's location indoors from a fisheye lenses.

## Quick Instructions
1. Draw a box accurately around a person (covering every part you can see)
2. Hit 's' to go step through frames
3. Adjust the box to keep it accurate
4. Go back to the first frame and repeat for the next person


For example:
### Good:
![](https://raw.githubusercontent.com/wiki/xysense/BeaverDam/images/good_1.png)
![](https://raw.githubusercontent.com/wiki/xysense/BeaverDam/images/good_2.png)
### Bad:
![](https://raw.githubusercontent.com/wiki/xysense/BeaverDam/images/bad_1.png)
![](https://raw.githubusercontent.com/wiki/xysense/BeaverDam/images/bad_2.png)


## Keyboard Shortcuts

- `a` step back 1 frame
- `s` step forward 1 frame
- `space` play/pause
- `d` or 'delete' to delete selected rectangle

## Detailed Instructions
1. We need you to draw an accurate box around each person you see in the video
2. We recommend you draw *one* person at a time from each video end to end and then rewind to the start for the next person
3. Best way to do this is frame by frame - hit 's' to move to the next frame and 'a' to move backwards 1 frame
4. You can skip frames when a person does not move. You will see a dotted line around that person.
4. If you don't see any people in the video for that frame then don't draw any rectangles
5. If the person disappears then delete the rectangle that represented that person (press 'd', or 'delete' with the box selected)

## Bonus Payment
1. The time to complete one HIT will depend on the number of people in the frame and the amount of movement.
2. As such we will pay a bonus of $0.02c per accurate frame mapped.
3. Note if the person does not move at all or if the dotted rectangle is accurate, please do NOT create a rectangle in that frame. We will reject the HIT if you do this.

## How accurate do you need to be?
We require a tight rectangle covering all of the person visible in that video frame.

      </pre>
      </div>
      <div class="modal-footer">
        <button id="submit-survey-btn" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

    </div>


    <!-- this script defines window.Labelbox and sets labelbox-jwt in localstorage -->
    <script type="text/javascript" src="https://api.labelbox.com/static/labeling-api.js"></script>
  </body>
</html>
